<template>
  <el-table :data="tableData" :border="parentBorder" style="width: 100%">
    <el-table-column label="部门名称" prop="name" />
    <el-table-column label="部门负责人" prop="man" />
    <el-table-column label="操作" width="120">
      <template #default="scope1">
        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope1.$index)">
          外删除
        </el-button>
        <el-button link type="primary" size="small" @click="showModal1 = true">
          修改
        </el-button>
      </template>
    </el-table-column>
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">电话: {{ props.row.phone }}</p>
          <p m="t-0 b-2">移动电话: {{ props.row.mb }}</p>
          <p m="t-0 b-2">所属机构: {{ props.row.div }}</p>
          <p m="t-0 b-2">传真: {{ props.row.zip }}</p>
          <p m="t-0 b-2">负责人: {{ props.row.man }}</p>
          <h3>子部门</h3>
          <el-table :data="props.row.family" :border="childBorder">
            <el-table-column label="子部门名称" prop="name" />
            <el-table-column label="负责人" prop="Lman" />
            <el-table-column label="电话" prop="phone" />
            <el-table-column label="移动电话" prop="mb" />
            <el-table-column label="传真" prop="zip" />
            <el-table-column label="" width="120">
              <template #default="scope">
                <el-button link type="primary" size="small" @click.prevent="deleteLittleRow(1,scope.$index)">
                  内删除
                </el-button>
                <el-button link type="primary" size="small" @click="showModal1 = true">
                  修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    
  </el-table>
  <el-button class="mt-4" style="width: 100%" @click="showModal = true">添加</el-button>

  <!-- 模态框 -->
  <div>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <el-form :model="form" label-width="120px">
          <el-form-item label="部门名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="部门所属机构">
            <el-select v-model="form.region" placeholder="选择机构">
              <el-option label="Tom1" value="Tom1" />
              <el-option label="Tom2" value="Tom2" />
              <el-option label="Tom3" value="Tom3" />
              <el-option label="Tom4" value="Tom4" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门负责人">
            <el-input v-model="form.man1" />
          </el-form-item>
          <el-form-item label="移动电话">
            <el-input v-model="form.mb" style="width: 60%" required />
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone1" style="width: 60%" required />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAddItem">Create</el-button>
            <el-button @click="showModal = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 修改模态框 -->
  <div>
    <div v-if="showModal1" class="modal">
      <div class="modal-content">
        <el-form :model="form" label-width="120px">
          <el-form-item label="部门名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="部门所属机构">
            <el-select v-model="form.region" placeholder="选择机构">
              <el-option label="Tom1" value="Tom1" />
              <el-option label="Tom2" value="Tom2" />
              <el-option label="Tom3" value="Tom3" />
              <el-option label="Tom4" value="Tom4" />
            </el-select>
          </el-form-item>

          <el-form-item label="部门地址">
            <el-input v-model="form.phone1" />
          </el-form-item>
          <el-form-item label="部门人数">
            <el-input v-model="form.mb" style="width: 60%" required />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onupmanItem">Upman</el-button>
            <el-button @click="showModal1 = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  man1: '',
  phone1: '',
  mb: ''
})


const now = new Date()
let showModal = ref(false)
let showModal1 = ref(false)
const tableData = ref([
  {
    man: 'Tom1',
    name: '部门1',
    phone: '1'+Math.ceil(Math.random()*10000000000),
    mb: '1'+Math.ceil(Math.random()*10000000000),
    div: 'Tom1',
    zip: '94114',
    family: [
      {
        name: '子部门1',
        Lman: 'Tom1',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
      {
        name: '子部门2',
        Lman: 'Tom2',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
      {
        name: '子部门3',
        Lman: 'Tom3',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
    ],
  },
  {
    man: 'Tom2',
    name: '部门2',
    phone: '1'+Math.ceil(Math.random()*10000000000),
    mb: '1'+Math.ceil(Math.random()*10000000000),
    div: 'Tom2',
    zip: '94114',
    family: [
      {
        name: '子部门1',
        Lman: 'Tom1',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
      {
        name: '子部门2',
        Lman: 'Tom2',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
      {
        name: '子部门3',
        Lman: 'Tom3',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
    ],
  },
  {
    man: 'Tom3',
    name: '部门3',
    phone: '1'+Math.ceil(Math.random()*10000000000),
    mb: '1'+Math.ceil(Math.random()*10000000000),
    div: 'Tom3',
    zip: '94114',
    family: [
      {
        name: '子部门1',
        Lman: 'Tom1',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
      {
        name: '子部门2',
        Lman: 'Tom2',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
      {
        name: '子部门3',
        Lman: 'Tom3',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
    ],
  },
  {
    man: 'Tom4',
    name: '部门4',
    phone: '1'+Math.ceil(Math.random()*10000000000),
    mb: '1'+Math.ceil(Math.random()*10000000000),
    div: 'Tom4',
    zip: '94114',
    family: [
      {
        name: '子部门1',
        Lman: 'Tom1',
        phone: '1'+Math.ceil(Math.random()*1000000000),
        mb: '1'+Math.ceil(Math.random()*1000000000),
        zip: '94114',
      },
      {
        name: '子部门2',
        Lman: 'Tom2',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
      {
        name: '子部门3',
        Lman: 'Tom3',
        phone: '1'+Math.ceil(Math.random()*10000000000),
        mb: '1'+Math.ceil(Math.random()*10000000000),
        zip: '94114',
      },
    ],
  },
])

const deleteRow = (index) => {
  const b = confirm(`你确定要删除${tableData.value[index].name}吗`)
  if (b) {
    //后台删除数据方法
    tableData.value.splice(index, 1)
  }
  console.log(index)
}
const deleteLittleRow = (i,index) => {
   console.log(tableData.value[i].family[index].name)
  const b = confirm(`你确定要删除${tableData.value[i].family[index].name}吗`)//${tableData.value[i].family.value[index].name}
  if (b) {
    //后台删除数据方法
    tableData.value[i].family.splice(index, 1)
  }
  console.log(tableData.value[i].family)
}
const onAddItem = () => {
  if (form.phone1 === '' || form.man1 === '' || form.name === '' || form.region === '' || form.mb === '') {
    console.log(form.name + '---' + form.man1 + '---' + form.phone1 + '---' + form.region + '---' + form.mb + '---');

    alert('输入内容')
    return
  }
  tableData.value.push({
    man: form.man1,
    name: form.name,
    state: form.region,
    phone: form.phone1,
    mobilephone: form.mb,
  })
  showModal.value = false
  form.name = '',
    form.region = '',
    form.man1 = '',
    form.mb = '',
    form.phone1 = ''
}
const onupmanItem = (index) => {
  tableData.value.splice(index, 1, {
    man: form.man1,
    name: form.name,
    state: form.region,
    phone: form.phone1,
    mobilephone: form.mb,
  })
  console.log(form.man1)
  showModal1.value = false
  form.name = '',
    form.region = '',
    form.man1 = '',
    form.phone1 = ''

}
</script>

<style scoped>
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
